<template>
  <div>
    <div class="mb-2">{{ editorTitle }}</div>

    <el-select v-model="selectedOption" @update:modelValue="inputHandle">
      <el-option
        v-for="(item, index) in status"
        :key="index"
        :value="item"
        :label="item"
      />
    </el-select>
  </div>
</template>

<script setup lang="ts">
import type { Component } from "vue";
import type { IUpdateStatus } from "@/types/common";
import type { IStringStatusArr } from "@/types";

const props = defineProps<{
  id: string;
  status: IStringStatusArr;
  isShow: boolean;
  name: string;
  statusKey: string;
  currentStatusIndex: number;
  editCom: Component;
  editorTitle: string;
}>();

const updateStatus = inject("updateStatus") as IUpdateStatus;

// ^ 标题内容
const selectedOption = ref(props.status[props.currentStatusIndex]);

const inputHandle = (value: string) => {
  updateStatus(props.statusKey, props.status.indexOf(value));
};
</script>

<style scoped></style>
